<template>
  <div class="login">
    <div style="display:flex;">
      <div class="loginItem" style="padding-right:50px;border:0;">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="70px"
          class="demo-ruleForm"
        >
          <el-form-item label="手机号:" prop="phone">
            <el-input v-model="ruleForm.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="验证码:" prop="code">
            <div class="inputItem">
              <el-input v-model="ruleForm.code" placeholder="请输入验证码"></el-input>
              <el-button
                type="primary"
                :disabled="isActive"
                style="width:200px;"
                @click="countdown"
              >{{ yzmTxt }}
              </el-button>
            </div>
          </el-form-item>
          <el-form-item style="margin:0;">
            <el-button type="primary" class="loginBtn" @click="onSubmit('ruleForm')">登录</el-button>
          </el-form-item>
          <el-form-item>
            <div>
              <span style="color: #000">登录即同意</span>
              <span style="cursor: pointer">《店掌柜使用协议》</span>
              <span style="color: #000">&</span>
              <span style="cursor: pointer">《隐私政策》</span>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="loginItem" style="padding-left:50px;font-size:15px;">
        <p>验证手机号的好处:</p>
        <div>1.随时随地掌握转铺的进程</div>
        <div>2.获取最新优质商铺资讯</div>
        <div>3.接铺客户可直接拨您的电话进行沟通，有助于转铺成功</div>
        <div>4.一对一专属商铺专家全程服务</div>
      </div>
    </div>
    <div class="dialog" v-if="show">
      <div class="content">
        <p><i class="el-icon-success"></i>温馨提示</p>
        <p style="margin-top: 15px;">老板，你已获得5套看铺机会哦</p>
        <p style="margin-top: 5px;">每天登录店掌柜，都可以获得5套看铺机会哦</p>
        <p style="margin-top: 5px;">(查看热门铺源不占看铺机会)</p>
        <p @click="handleClick">我知道了</p>
      </div>
    </div>
    <div class="mask"  v-if="show"></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        timerCodeMsg: "获取验证码",
        timer: null,
        isActive: false,
        wait: 0,
        ruleForm: {
          phone: "",
          code: ""
        },
        sessionId: "",
        rules: {
          phone: [
            {
              required: true,
              message: "请输入手机号",
              trigger: "blur"
            },
            {
              pattern: /^[1]([3-9])[0-9]{9}$/,
              message: "请输入正确的手机号",
              trigger: "blur"
            }
          ],
          code: [{required: true, message: "请输入验证码", trigger: "blur"}]
        },
        show:false
      };
    },
    computed: {
      yzmTxt() {
        return this.wait > 0 ? "重新获取（" + this.wait + "）" : "获取验证码";
      }
    },
    methods: {
      countdown() {
        if (this.ruleForm.phone.length === 11) {
          this.wait = 60;
          if (this.wait === 0) {
            this.wait = 60;
          } else {
            this.isActive = true; // 背景变灰
            this.timer = setInterval(() => {
              if (this.wait > 0 && this.wait <= 60) {
                this.wait--;
              } else {
                this.isActive = false; // 背景变红
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000);
          }
          this.forcode();
        }
      },
      forcode() {
        this.$http.get(this.$api.getcode(this.ruleForm.phone)).then(res => {
          if (res.data.code === 0) {
            this.sessionId = res.data.map.sessionId;
          }
        });
      },
      login() {
        this.$http
          .get(
            this.$api.login(
              this.ruleForm.phone,
              "",
              this.ruleForm.code,
              this.sessionId
            )
          )
          .then(res => {
            if (res.data.code === 0) {
              sessionStorage.setItem("userId", res.data.userInfo.id);
              sessionStorage.setItem("nick", res.data.userInfo.nick);
              sessionStorage.setItem("facePath", res.data.userInfo.facePath);
              sessionStorage.setItem("account", res.data.userInfo.account);
              sessionStorage.setItem("isLogin", "true");
              let userData = {};
              userData.userId = res.data.userInfo.id;
              userData.nick = res.data.userInfo.nick;
              userData.account = res.data.userInfo.account;
              userData.facePath = res.data.userInfo.facePath;
              sessionStorage.setItem('isLogin', 'true')
              // // 调用store.mutations存入数据
              this.$store.commit("upUserInfo", userData);
              this.$set(this.$store.state, "loginBtn", false);
              if (res.data.userInfo.nick) {
                this.$router.push("/home");
                //this.show = true
              } else {
                // this.$router.push("/personalcenter/myaccount");
              }
            } else {
              this.$message.error(res.data.msg)
            }
          });
      },
      handleClick(){
        this.$router.push("/home");
        this.show = false
      },
      onSubmit(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.login();
          }
        });
      }
    }
  };
</script>
<style scoped lang="less">
  .login {
    width: 1200px;
    margin: 20px auto;
    background: #fff;
    display: flex;
    justify-content: center;
    padding: 100px 0;
    position: relative;
  }

  .inputItem {
    display: flex;

    button {
      margin-left: 20px;
    }
  }

  .loginBtn {
    font-size: 16px;
  }

  .demo-ruleForm {
    width: 470px;
  }

  .loginItem {
    line-height: 30px;
    border-left: 1px solid #ccc;

    p {
      font-size: 18px;
    }
  }

  .loginItem {
    text-align: left;

    button {
      width: 100%;
      background: #ff5001;
      border: 1px solid #ff5001;
    }
  }
  .mask{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.3);
  }
  .dialog {
    background: #ffff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    .content {
      width: 400px;

      p {
        color: #000;
        &:first-child {
          padding-top: 10px;
          color: #67C23A;
        }

        &:last-child {
          height: 44px;
          line-height: 44px;
          cursor: pointer;
          color: #e41e1d;
          border-top: 1px solid #ccc;
          margin-top: 5px;
        }
      }
    }
  }
</style>
